<template>
  <div
    class="Con"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="Con-C">
      <table>
        <tr>
          <td colspan="2" style="height: 16%" class="td1">
            实验室负责人排班信息导入
          </td>
        </tr>
        <tr>
          <td class="td2">导入表格:</td>
          <td><input type="file" class="file" @change="getFiles($event)" /></td>
        </tr>

        <tr>
          <td style="height: 0%"></td>
          <td style="height: 0%; text-align: right">
            <el-button
              type="primary"
              icon="el-icon-upload"
              size="small"
              class="but1"
              @click="but1()"
              >上传</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh-left"
              size="small"
              @click="but2()"
              >重传</el-button
            >
            <el-button type="primary" icon="el-icon-paperclip" size="small"
              ><a
                href="http://114.116.33.6:8188/api/photoload/administrator"
                download
                >下载模板</a
              ></el-button
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";
export default {
  data() {
    return {
      File: "",
      loading: false,
    };
  },
  methods: {
    but1() {
      if (this.File === "") {
        alert("文件不可以为空！！");
      } else {
        this.loading = true;
        axios1({
          url: "/administrator/import",
          data: {
            file: this.File,
          },
          method: "post",
          headers: {
            token: this.$store.state.token, //设置token 其中K名要和后端协调好
            "Content-Type": "multipart/form-data",
          },
        })
          .then((res) => {
            this.loading = false;
            alert(res.data.msg);
            location.reload();
          })
          .catch((res) => {
            this.loading = false;
            alert("请求失败！！可能文件格式有问题！！");
            location.reload();
          });
      }
    },
    but2() {
      location.reload();
    },
    getFiles(e) {
      this.File = e.target.files[0];
      console.log(this.File);
    },
  },
};
</script>

<style scoped>
.Con {
  width: 90%;
  height: 70%;
  box-shadow: 1px 1px 10px rgb(133, 133, 133);
  margin: auto;
  margin-top: 8%;
  overflow: hidden;
}
.Con-C {
  width: 70%;
  height: 50%;
  margin: auto;

  margin-top: 10%;
}
.Con-C table {
  width: 100%;
  height: 100%;
}
.Con-C table td {
  height: 0%;
}
.Con-C table tr td {
  text-align: center;
}
.td1 {
  font-size: 24px;
  font-weight: 600;
  color: rgb(26, 24, 24);
}
.td2 {
  font-weight: 600;
  font-size: 16px;
  color: rgb(63, 63, 63);
}
.file {
  width: 100%;
  background-color: rgb(178, 180, 182);
  font-size: 16px;
  color: rgb(107, 107, 107);
}
#td3 {
  text-align: right;
  padding-top: 10px;
}
a {
  text-decoration: none;
  color: aliceblue;
}
</style>
